import React, {useState} from 'react';
import {
    FlatList,
    Image,
    Platform,
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';


const commonFuncs = [
    {name: '公文', icon: 'documents-outline', color: '#F1A549', family: 'Icon'},
    {name: '请假审批', icon: 'calendar-outline', color: '#43D980', family: 'Icon'},
    {name: '邮件', icon: 'mail-sharp', color: '#679BFF', family: 'Icon'},
    {name: '用印', icon: 'stamp', color: '#2498F7', family: 'FontAwesome5'},
];

const AppGrid = ({data, title, navigation}) => (
    <View style={styles.gridContainer}>
        <Text style={{fontSize: 18}}>常用功能</Text>
        {title && <Text style={styles.gridTitle}>{title}</Text>}
        <FlatList
            data={data}
            renderItem={({item}) => {
                const ICON = item.family === 'Icon' ? Icon : FontAwesome5;
                return (
                    <TouchableOpacity
                        style={styles.gridItem}
                        onPress={() => {
                            if (item.name === '用印') {
                                navigation.navigate('SealScreen');
                            } else if (item.name === '请假审批') {
                                navigation.navigate('LeaveList');
                            }
                        }}>
                        <View style={[styles.gridIconContainer, {backgroundColor: item.color}]}>
                            <ICON name={item.icon} size={28} color="#fff"/>
                        </View>
                        <Text style={styles.gridItemText}>{item.name}</Text>
                    </TouchableOpacity>
                );
            }}
            keyExtractor={(item) => item.name}
            numColumns={4}
            scrollEnabled={false}
        />
    </View>
);

export function HomeScreen(props: any) {
    const [activeTab, setActiveTab] = useState("待办事项");
    return (
        <SafeAreaView style={styles.safeArea}>
            <StatusBar barStyle="dark-content" backgroundColor="#fff"/>
            <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
                <View style={styles.statusBar}>
                    <Image
                        source={require('../../assets/images/gxuLogo.png')}
                        style={styles.logo}
                    />
                    <TouchableOpacity>
                        <View style={styles.searchContainer}>
                            <Text style={styles.searchInput}>搜索</Text>
                            <Icon name="search-outline" size={24} color="#999"/>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Icon name="notifications-outline" size={24} color="#fff"/>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Icon name="scan-outline" size={24} color="#fff"/>
                    </TouchableOpacity>
                </View>

                {/* 常用功能 */}
                <AppGrid data={commonFuncs} title={undefined} navigation={props.navigation}/>

                <View style={styles.tabContainer}>
                    <TouchableOpacity onPress={() => setActiveTab('待办事项')}
                                      style={[styles.tabItem, activeTab === '待办事项' && styles.activeTabItem]}>
                        <Text style={[styles.tabText, activeTab === '待办事项' && styles.activeTabText]}>待办事项</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => setActiveTab('待阅文件')}
                                      style={[styles.tabItem, activeTab === '待阅文件' && styles.activeTabItem]}>
                        <Text style={[styles.tabText, activeTab === '待阅文件' && styles.activeTabText]}>待阅文件</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => setActiveTab('我的申请')}
                                      style={[styles.tabItem, activeTab === '我的申请' && styles.activeTabItem]}>
                        <Text style={[styles.tabText, activeTab === '我的申请' && styles.activeTabText]}>我的申请</Text>
                    </TouchableOpacity>
                </View>

                {/* Tab Content */}
                <View style={styles.tabContent}>
                    {activeTab === '待办事项' && <Text>页面 待办事项 的内容</Text>}
                    {activeTab === '待阅文件' && <Text>页面 待阅文件 的内容</Text>}
                    {activeTab === '我的申请' && <Text>页面 我的申请 的内容</Text>}
                </View>

            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: '#f4f6f9',
        marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight
    },
    container: {flex: 1},
    statusBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#2498F7',
        paddingVertical: 10,
        paddingHorizontal: 15,
        height: "auto"
    },
    searchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 25,
        flex: 1,
        width: 230,
        paddingHorizontal: 15,
    },
    searchInput: {
        flex: 1,
    },
    logo: {
        height: 40,
        width: 40,
    },
    gridContainer: {backgroundColor: '#fff', borderRadius: 10, marginHorizontal: 15, marginTop: 15, padding: 10},
    gridTitle: {fontSize: 16, fontWeight: 'bold', marginBottom: 10, paddingLeft: 5},
    gridItem: {flex: 1, alignItems: 'center', paddingVertical: 15},
    gridIconContainer: {
        width: 50,
        height: 50,
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 8
    },
    gridItemText: {fontSize: 12, color: '#666'},
    tabContainer: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginHorizontal: 15,
        marginTop: 15,
        borderRadius: 10,
    },
    tabItem: {
        paddingVertical: 15,
        alignItems: 'center',
        flex: 1,
    },
    activeTabItem: {
        borderBottomWidth: 3,
        borderBottomColor: '#2498F7',
    },
    tabText: {
        color: '#333',
        fontSize: 16,
    },
    activeTabText: {
        color: '#2498F7',
        fontWeight: 'bold',
    },
    tabContent: {
        margin: 15,
        padding: 20,
        backgroundColor: '#fff',
        borderRadius: 10,
        minHeight: 100, // 设置最小高度以显示内容
        justifyContent: 'center',
        alignItems: 'center',
    }
});